import { Checkbox, Popover } from "antd";
import CheckableTag from "antd/lib/tag/CheckableTag";
import React from "react";
import { useEffect } from "react";
import { useState } from "react";
import ZcpopoverContent from "./zc-popover";





const CheckTag = ({ count,  module, statJobDtList, setStatJobDtList, item, key }) => {

    // n值再传给下面子组件，每次n值变化了，说明进行了清空操作，把勾选去掉
    const [n, setN] = useState(count || 0);
    useEffect(() => {
        if (count !== n) {
            // 清除，并且把count值赋值给n
            setSelectedTags([])
            setRiskCode("")
            setN(count)
        }
    }, [count])


    const [selectedTags, setSelectedTags] = useState([]);//接收存放当前选择的指标
    const [riskCode, setRiskCode] = useState("");//接收子组件选择的险种

    // 监听选择的险种/指标，设置指标列表
    useEffect(() => {
        var tempList = statJobDtList
        tempList = tempList?.filter(stat => {
            return stat.targetCode !== item.cval
        })
        if (selectedTags.length === 0) {
            setStatJobDtList([...tempList])
        } else {
            setStatJobDtList([...tempList, {
                module,
                targetCode: item.cval,
                riskCode: riskCode,
                createBy: sessionStorage.userCode,
                operateBy: sessionStorage.userCode,
            }])
        }
    }, [selectedTags, riskCode])
    const handleChange = (tag, checked) => {
        const nextSelectedTags = checked
            ? [...selectedTags, tag]
            : selectedTags.filter((t) => t !== tag);
        setSelectedTags(nextSelectedTags);

    };


    // 默认指标配置和带险种的配置
    const defaultOptions = [{ label: "默认", value: item.cval }]
    const optionsConfig = [
        {
            label: '全险种',
            value: 'all',
        },
        {
            label: '车险',
            value: 'veh',
        },
        {
            label: '意健险',
            value: 'health',
        },
    ];


    // 带险种的指标需要在选择后显示所选的险种
    const showRisk = () => {
        var str = "";
        for (var i = 0; i < optionsConfig.length; i++) {
            if (optionsConfig[i].value === riskCode) {
                str = `（${optionsConfig[i].label}）`
                break;
            }
        }
        return str;
    }

    return (
        <>
            {
                item.cext2 ? <Popover
                    trigger="click"
                    content={
                        <ZcpopoverContent
                            n={n}
                            setRiskCode={setRiskCode}
                            selectedTags={selectedTags}
                            setSelectedTags={setSelectedTags}
                            options={item.cext2 ? optionsConfig : defaultOptions}
                        />
                    }
                >
                    <CheckableTag

                        key={key}
                        checked={
                            item.cext2 ? selectedTags.length === 1 : selectedTags.indexOf(item.cval) > -1
                        }

                    >
                        {item.cname}{showRisk()}
                    </CheckableTag>
                </Popover> : <CheckableTag

                    key={key}
                    checked={
                        item.cext2 ? selectedTags.length === 1 : selectedTags.indexOf(item.cval) > -1
                    }

                    onChange={(checked) => handleChange(item.cval, checked)}
                >
                    {item.cname}
                </CheckableTag>
            }

        </>
    )
}

export default CheckTag;